<template>
  <div>
    <el-dialog
      :title="option.title"
      :visible.sync="isShow"
      @close="closeUser"
      width="90%"
      @open="openCreate"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="loading">
        <div class="content">
          <el-card >
            <el-form
              size="mini"
              ref="form"
              :model="form"
              inline
              label-width="150px"
              label-position="left"
            >
              <el-row :gutter="10">
                <!-- <div style="float:right">
                  <el-dropdown size="mini"> 
                    <el-button   @click="handleClick(scope.row)">
                      修改技能
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>互联网金融</el-dropdown-item>
                      <el-dropdown-item>OTA业务</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>

                  <el-dropdown size="mini" style="float:left"> 
                    <el-button   @click="handleClick(scope.row)">
                      修改状态
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>置忙</el-dropdown-item>
                      <el-dropdown-item>注销</el-dropdown-item>
                      <el-dropdown-item>监听</el-dropdown-item>
                      <el-dropdown-item>强插</el-dropdown-item>
                      <el-dropdown-item>阻塞</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div> -->
              </el-row>
              <el-row :gutter="10">
                <!-- <dynamic-table :tableData="tableData" :tableLabel="tableLabel">
                </dynamic-table> -->
                <el-table
                  :data="tableData"
                  ref="tableData"
                  border
                  class="tableMarginTop"
                  :row-style="rowClass"
                  @selection-change="handleSelectionChange"
                  header-row-class-name="tableHeaderClass"
                  style="min-height:390px;"
                  @row-click="clickRow">
                  <el-table-column v-if="false" type="selection" width="40px"></el-table-column>
                  <!-- <el-table-column prop="alarm" width="80"  label="告警" ></el-table-column> -->
                  <el-table-column prop="AGENTID" width="105"  label="坐席工号"></el-table-column>
                  <el-table-column prop="EXTENSIONNO"  label="签入分机" ></el-table-column>
                  <el-table-column prop="AGENTNAME"  label="坐席姓名" ></el-table-column>
                  <el-table-column prop="YY_STATUS_CurrentAgentStatus"  label="状态标志" >
                    <template slot-scope="scope">
                      <img :src="['../../../../../static/images/image/scene_'+ 
                      scope.row.YY_STATUS_CurrentAgentStatus+'.png']"/>
                      <!-- <img src="../../../../../static/images/image/scene_ask.png"/> -->
                    </template>
                  </el-table-column>
                  <el-table-column prop="YY_STATUS_CurrentAgentStatus"  label="当前状态" ></el-table-column>
                  <el-table-column prop="YY_CurrentAgentStatus_Time"  label="持续时间" ></el-table-column>
                  <el-table-column prop="loginIntime"  label="签入时间" ></el-table-column>
                  <el-table-column prop="avecalltimes" width="100"  label="人均日话量" ></el-table-column>
                  <el-table-column prop="avedealtimes"  label="件均处理时长(s)" ></el-table-column>
                  <el-table-column prop="YY_TIME_CALLS_TOTAL" width="95"   label="通话时长(s)"></el-table-column>
                  <el-table-column prop="availability"  width="90"  label="工时利用率(%)" ></el-table-column>
                  <!-- <el-table-column
                    label="技能"
                    width="230">
                    <template slot-scope="scope">
                      <el-dropdown size="mini"  style="float:left"> 
                        <el-button   @click="handleClick(scope.row)">
                          修改技能
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>互联网金融</el-dropdown-item>
                          <el-dropdown-item>OTA业务</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                      <el-dropdown size="mini" style="float:left"> 
                        <el-button   @click="handleClick(scope.row)">
                          修改状态
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item>置忙</el-dropdown-item>
                          <el-dropdown-item>注销</el-dropdown-item>
                          <el-dropdown-item>监听</el-dropdown-item>
                          <el-dropdown-item>强插</el-dropdown-item>
                          <el-dropdown-item>阻塞</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </template>
                  </el-table-column> -->
                </el-table>

              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType" >关闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request1 from "@/common/utils/requestYg";
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import dynamicTable from "@/components/dynamicTable/";
import selstatus from "@/message/siteManagement/siteCondition/queryStatus";
import request from "@/common/utils/requestCms";

export default {
  name: '',
  components: {
    dynamicTable
  },
  data() {
    return {
      selectRow:[],
      selectData:[],
      loading: false,
      tableData:[
        // { alarm: "告警", agentid: "24925", extension:"20087", agentname:"史伟", status:"通话中", elapsedtime:"002021", checkintime:"085526", percallvolume:"30", perprocessingtime:"205", callduration:"205",useratio:"96.6",skill:"" },
        // { alarm: "告警", agentid: "24928", extension:"20079", agentname:"舒宁", status:"示忙", elapsedtime:"000524", checkintime:"075413", percallvolume:"22", perprocessingtime:"214", callduration:"214",useratio:"93.3",skill:"" },
        // { alarm: "告警", agentid: "24922", extension:"20044", agentname:"张梦琪", status:"小休", elapsedtime:"001024", checkintime:"081424", percallvolume:"30", perprocessingtime:"239", callduration:"239",useratio:"96.6",skill:"" },
        // { alarm: "告警", agentid: "24919", extension:"20039", agentname:"陈斌", status:"ACW", elapsedtime:"000210", checkintime:"085425", percallvolume:"44", perprocessingtime:"228", callduration:"228",useratio:"90",skill:"" },
        // { alarm: "无", agentid: "24923", extension:"20030", agentname:"王安静", status:"小休", elapsedtime:"000224", checkintime:"083311", percallvolume:"32", perprocessingtime:"211", callduration:"211",useratio:"95",skill:"" },
        // { alarm: "无", agentid: "24321", extension:"20027", agentname:"王虹芳", status:"其他", elapsedtime:"000824", checkintime:"075909", percallvolume:"27", perprocessingtime:"208", callduration:"208",useratio:"93",skill:"" },
        // { alarm: "无", agentid: "23211", extension:"20019", agentname:"孙茜", status:"咨询呼叫", elapsedtime:"000322", checkintime:"085001", percallvolume:"44", perprocessingtime:"222", callduration:"222",useratio:"96.2",skill:"" },
        // { alarm: "无", agentid: "24919", extension:"20018", agentname:"姚佩文", status:"呼叫拨号", elapsedtime:"000004", checkintime:"085424", percallvolume:"50", perprocessingtime:"190", callduration:"190",useratio:"95",skill:"" },
      ],
      form: {

      },
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {
  },
  watch:{
    selectData(data){
      this.selectRow=[];
      if(data.length>0){
        data.forEach((item,index)=>{
          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    }
  },
  mounted(){
    
  },
  methods: {
    selAgentStatus(){
      let resBody = new selstatus();
      request1(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.tableData = response.RSP_BODY.AgentList || [];
            console.log(this.fileUploadUrl)
          } else {
            this.$message({
              type: "error",
              message: response.SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(error => {
        })
    },
    clickRow(row){
      this.$refs.tableData.toggleRowSelection(row)
    },
    handleSelectionChange(data){
      this.selectData = data;
    },
    rowClass({row,rowIndex}){
      if(this.selectRow.includes(rowIndex)){
        return {"background-color":"#dff0d8"}
      }
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$emit("refreshTable");
      this.detailon = true;
      this.showCommon = false;
    },
    addType() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
    },
    openCreate(){
      this.selAgentStatus();
      setInterval(() => {
        this.selAgentStatus();
      }, 60000);
    }
  }
};
</script>
<style lang="scss" scoped>


